(function($){ 
    var batchViewTmp = [
            '<div class="batchViewWrapper">',
                '<div class="iconListCtn">',
                    '<div class="iconList"></div>',
                '</div>',
                '<div class="titleCtn">',
                    '<div class="title"></div>',
                '</div>',
                '<div class="operationAreaCtn">',
                '</div>',
            '</div>'
        ].join(''),
            
        iconListTmp = [
            '<div class="iconListItem" id="<%=id%>">',
                '<div class="iconListItemTitle"><%=title%></div>',
                '<div class="iconListItemDesc"><%=desc%></div>',
            '</div>'
        ].join('');
    
    function _genPosArray(middle, itemCount, increment, type){
        var posArr = [], increCount;
        type = type || 'i';
        if(itemCount % 2){
            posArr.push(middle);
            increCount = parseInt(itemCount / 2);
        } else {
            posArr.push(middle - increment/2);
            posArr.push(middle + increment/2);
            increCount = itemCount / 2 - 1;
        }
        while(increCount--){
            switch(type){
                case 'n':
                    posArr.unshift(posArr.first() - increment);
                    posArr.push(posArr.last() - increment);         
                    break;
                case 'u':
                    posArr.unshift(posArr.first() + increment);
                    posArr.push(posArr.last() + increment);         
                    break;
                case 'i':
                    posArr.unshift(posArr.first() - increment);
                    posArr.push(posArr.last() + increment);         
                    break;
                case 'd':
                    posArr.unshift(posArr.first() + increment);
                    posArr.push(posArr.last() - increment);         
                    break;
            }           
        }
        return posArr;
    }
    
    function _iconList(selector){
        this.$wrapper = $(selector);
    }
    
    /**
     *itemCfg : {
     *  id : '',
     *  title : '',
     *  desc : ''
     *}
     */
    _iconList.prototype.addItem = function(itemCfg){
        var $newItem = $(tmpl(iconListTmp, itemCfg));
        this.$wrapper.find('.iconList').append( $newItem );
        this.render();
    };
        
    _iconList.prototype.removeItem = function(itemID){
        var _this = this,
                $removedItem = this.$wrapper.find('#' + itemID);
        $removedItem.css('left', -200);
        (function(){
            $removedItem.remove();
            _this.render();
        }).defer(300);        
    };   
            
    _iconList.prototype.clear = function(){
        this.$wrapper.html('');
    };
                
    _iconList.prototype.render = function(){
        var leftOffset = 10,
                topOffset = 3,
                angleOffset = 8;
        
        var wrapperWidth = this.$wrapper.width(),
                wrapperHeight = 200,
                itemWidth = 80,
                itemHeight = 70;
        
        
        var $iconListItems = this.$wrapper.find('.iconList>.iconListItem');
        var itemCount = $iconListItems.length;
        var middleTop = 10;
        var middleLeft = 200;
        var middleAngle = 0;
        
        var leftPosArr = _genPosArray(middleLeft, itemCount, leftOffset);
        var topPosArr = _genPosArray(middleTop, itemCount, topOffset, 'u');
        var angleArr =  _genPosArray(middleAngle, itemCount, angleOffset);
        
        $iconListItems.each(function(index){
            $(this).css({
                'left' : leftPosArr[index],
                'top' : topPosArr[index],
                '-webkit-transform' : 'rotate(' + angleArr[index] + 'deg)'
            });         
        });
    };
    
    //--------------------------------------------------- 
    
    function _operationArea(selector){
        this.$wrapper = $(selector);
    }   
    _operationArea.prototype.addOperationItem = function(id, operationHtml, callback){
        var $newOperationItem = $(operationHtml);
        $newOperationItem.attr('id', id);
        $newOperationItem.appendTo(this.$wrapper);
        if(callback){
            callback($newOperationItem);
        }
    };   
    _operationArea.prototype.removeOperationItem = function(id){
        this.$wrapper.find('#' + id).remove();
    };   
    
    _operationArea.prototype.clearOperationItem = function(){
        this.$wrapper.html('');
    };
        
    //---------------------------------------------------
    
    /**
     * 扇形卡视图控件.
     * batchViewCfg : {
     *  selector : ''
     *  title : ''      
     * }
     */
    function _SectorView(batchViewCfg){
        this.config = batchViewCfg;
        this.selector = this.config['selector'];
        this.$wrapper = $(batchViewTmp).appendTo(this.selector);
        this.iconList = new _iconList( this.$wrapper.find('>.iconListCtn') );
        this.operationArea = new _operationArea( this.$wrapper.find('>.operationAreaCtn') );
        this.$title = this.$wrapper.find('>.titleCtn>.title');
        if(this.config['title']){
            this.setTitle(this.config['title']);
        }
    }
    
    _SectorView.prototype.setTitle = function(title){
        if(title){
            this.$title.text(title);
        }
    };
        
    //-------------------------------------------------------------------
    
    //TODO: 注册为jQuery插件.
        
})(jQuery);

/**
    (function(){    
        var sectorView = new SectorView({
            selector : '.batchViewerCtn',
            title : 'This is View Title.'
        });    
        var itemIndex = 1;
        $('#add').click(function(){
            sectorView.iconList.addItem({
                id : 'test' + itemIndex,
                title : itemIndex + '-File API',
                desc : 'desc desc desc ' + itemIndex
            }); 
            itemIndex++;
        });     
        $('#remove').click(function(){
            sectorView.iconList.removeItem( 'test' + $('#itemID').val() );
        });    
        //add init items.
        $('#add').trigger('click');
        $('#add').trigger('click');
        $('#add').trigger('click');
        $('#add').trigger('click');    
    })();
*/